<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>EasyWeb后台开发框架</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 应用快捷块样式 */
        .console-app-group {
            padding: 16px;
            border-radius: 4px;
            text-align: center;
            background-color: #fff;
            cursor: pointer;
            display: block;
        }

        .console-app-group .console-app-icon {
            width: 32px;
            height: 32px;
            line-height: 32px;
            margin-bottom: 6px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 32px;
            color: #69c0ff;
        }

        .console-app-group:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, .08);
        }

        /** //应用快捷块样式 */

        /** 小组成员 */
        .console-user-group {
            position: relative;
            padding: 10px 0 10px 60px;
        }

        .console-user-group .console-user-group-head {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 50%;
            left: 12px;
            margin-top: -16px;
            border-radius: 50%;
        }

        .console-user-group .layui-badge {
            position: absolute;
            top: 50%;
            right: 8px;
            margin-top: -10px;
        }

        .console-user-group .console-user-group-name {
            line-height: 1.2;
        }

        .console-user-group .console-user-group-desc {
            color: #8c8c8c;
            line-height: 1;
            font-size: 12px;
            margin-top: 5px;
        }

        /** 卡片轮播图样式 */
        .admin-carousel .layui-carousel-ind {
            position: absolute;
            top: -41px;
            text-align: right;
        }

        .admin-carousel .layui-carousel-ind ul {
            background: 0 0;
        }

        .admin-carousel .layui-carousel-ind li {
            background-color: #e2e2e2;
        }

        .admin-carousel .layui-carousel-ind li.layui-this {
            background-color: #999;
        }

        /** 广告位轮播图 */
        .admin-news .layui-carousel-ind {
            height: 45px;
        }

        .admin-news a {
            display: block;
            line-height: 70px;
            text-align: center;
        }

        /** 最新动态时间线 */
        .layui-timeline-dynamic .layui-timeline-item {
            padding-bottom: 0;
        }

        .layui-timeline-dynamic .layui-timeline-item:before {
            top: 16px;
        }

        .layui-timeline-dynamic .layui-timeline-axis {
            width: 9px;
            height: 9px;
            left: 1px;
            top: 7px;
            background-color: #cbd0db;
        }

        .layui-timeline-dynamic .layui-timeline-axis.active {
            background-color: #0c64eb;
            box-shadow: 0 0 0 2px rgba(12, 100, 235, .3);
        }

        .dynamic-card-body {
            box-sizing: border-box;
            overflow: hidden;
        }

        .dynamic-card-body:hover {
            overflow-y: auto;
            padding-right: 9px;
        }

        /** 优先级徽章 */
        .layui-badge-priority {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            padding: 0;
            line-height: 18px;
            border-width: 2px;
            font-weight: 600;
        }
    </style>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 正文开始 -->
<div class="layui-fluid">

    <>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    销售额目标<span class="layui-badge layui-badge-blue pull-right">日</span>
                </div>
                <div id="xsmb" style="height: 600px;">
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">点餐频率分析</div>
                <div class="layui-card-body">
                    <div id="consoleChartsWord" style="height: 600px;"></div>
                </div>
            </div>
        </div>


    </div>

</div>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echartsTheme.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts-wordcloud.min.js"></script>

<script>
    layui.use(['layer', 'element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var myCharts1 = echarts.init(document.getElementById('xsmb'));
        let angle = 0; //角度，用来做简单的动画效果的
        let value = 55.33;
        var option1 = option = {
            backgroundColor: "#061740",
            title: {
                text: "{a|" + value + "}{c|%}",
                x: "center",
                y: "center",
                textStyle: {
                    rich: {
                        a: {
                            fontSize: 48,
                            color: "#29EEF3",
                        },

                        c: {
                            fontSize: 20,
                            color: "#ffffff",
                            // padding: [5,0]
                        },
                    },
                },
            },
            legend: {
                type: "plain",
                orient: "vertical",
                right: 0,
                top: "10%",
                align: "auto",
                data: [
                    {
                        name: "涨价后没吃过",
                        icon: "circle",
                    },
                    {
                        name: "天天吃",
                        icon: "circle",
                    },
                    {
                        name: "三五天吃一次",
                        icon: "circle",
                    },
                    {
                        name: "半个月吃一次",
                        icon: "circle",
                    },
                ],
                textStyle: {
                    color: "white",
                    fontSize: 16,
                    padding: [10, 1, 10, 0],
                },
                selectedMode: false,
            },
            series: [
                {
                    name: "ring5",
                    type: "custom",
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: "arc",
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                                startAngle: ((0 + angle) * Math.PI) / 180,
                                endAngle: ((90 + angle) * Math.PI) / 180,
                            },
                            style: {
                                stroke: "#0CD3DB",
                                fill: "transparent",
                                lineWidth: 1.5,
                            },
                            silent: true,
                        };
                    },
                    data: [0],
                },
                {
                    name: "ring5",
                    type: "custom",
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: "arc",
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                                startAngle: ((180 + angle) * Math.PI) / 180,
                                endAngle: ((270 + angle) * Math.PI) / 180,
                            },
                            style: {
                                stroke: "#0CD3DB",
                                fill: "transparent",
                                lineWidth: 1.5,
                            },
                            silent: true,
                        };
                    },
                    data: [0],
                },
                {
                    name: "ring5",
                    type: "custom",
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: "arc",
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                                startAngle: ((270 + -angle) * Math.PI) / 180,
                                endAngle: ((40 + -angle) * Math.PI) / 180,
                            },
                            style: {
                                stroke: "#0CD3DB",
                                fill: "transparent",
                                lineWidth: 1.5,
                            },
                            silent: true,
                        };
                    },
                    data: [0],
                },
                {
                    name: "ring5",
                    type: "custom",
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: "arc",
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                                startAngle: ((90 + -angle) * Math.PI) / 180,
                                endAngle: ((220 + -angle) * Math.PI) / 180,
                            },
                            style: {
                                stroke: "#0CD3DB",
                                fill: "transparent",
                                lineWidth: 1.5,
                            },
                            silent: true,
                        };
                    },
                    data: [0],
                },
                {
                    name: "ring5",
                    type: "custom",
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        let x0 = api.getWidth() / 2;
                        let y0 = api.getHeight() / 2;
                        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                        let point = getCirlPoint(x0, y0, r, 90 + -angle);
                        return {
                            type: "circle",
                            shape: {
                                cx: point.x,
                                cy: point.y,
                                r: 4,
                            },
                            style: {
                                stroke: "#0CD3DB", //粉
                                fill: "#0CD3DB",
                            },
                            silent: true,
                        };
                    },
                    data: [0],
                },
                {
                    name: "ring5", //绿点
                    type: "custom",
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        let x0 = api.getWidth() / 2;
                        let y0 = api.getHeight() / 2;
                        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
                        let point = getCirlPoint(x0, y0, r, 270 + -angle);
                        return {
                            type: "circle",
                            shape: {
                                cx: point.x,
                                cy: point.y,
                                r: 4,
                            },
                            style: {
                                stroke: "#0CD3DB", //绿
                                fill: "#0CD3DB",
                            },
                            silent: true,
                        };
                    },
                    data: [0],
                },
                {
                    name: "吃猪肉频率",
                    type: "pie",
                    radius: ["58%", "45%"],
                    silent: true,
                    clockwise: true,
                    startAngle: 90,
                    z: 0,
                    zlevel: 0,
                    label: {
                        normal: {
                            position: "center",
                        },
                    },
                    data: [
                        {
                            value: value,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: {
                                        // 完成的圆环的颜色
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#4FADFD", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "#28E8FA", // 100% 处的颜色
                                            },
                                        ],
                                    },
                                },
                            },
                        },
                        {
                            value: 100 - value,
                            name: "",
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: "#173164",
                                },
                            },
                        },
                    ],
                },

                {
                    name: "",
                    type: "gauge",
                    radius: "58%",
                    center: ["50%", "50%"],
                    startAngle: 0,
                    endAngle: 359.9,
                    splitNumber: 8,
                    hoverAnimation: true,
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        length: 60,
                        lineStyle: {
                            width: 5,
                            color: "#061740",
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            opacity: 0,
                        },
                    },
                    detail: {
                        show: false,
                    },
                    data: [
                        {
                            value: 0,
                            name: "",
                        },
                    ],
                },
            ],
        };

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
        function getCirlPoint(x0, y0, r, angle) {
            let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
            let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
            return {
                x: x1,
                y: y1,
            };
        }

        function draw() {
            angle = angle + 3;
            myCharts1.setOption(option1, true);
            //window.requestAnimationFrame(draw);
        }

        setInterval(function () {
            //用setInterval做动画感觉有问题
            draw();
        }, 100);


        myCharts1.setOption(option1);


        /** 渲染词云图表 */
        var myCharts5 = echarts.init(document.getElementById('consoleChartsWord'));
        var options5 = {
            tooltip: {show: true},
            series: [{
                name: "点餐量",
                type: 'wordCloud',
                shape: 'diamond',
                width: '100%',
                height: '100%',
                sizeRange: [12, 23], //文字字号范围
                gridSize: 6,
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {shadowBlur: 10, shadowColor: '#666'}
                }, data: []
            }]
        };

        myCharts5.setOption(options5);
        var statisticsData = [];
        // 赋值
        $.ajax({
            url: getProjectUrl() +"order/toCountHallname",    //请求的接口名
            type: 'GET',
            async: true,
            success: function(data){
                myCharts5.hideLoading();  //加载数据完成后的loading动画
                // var dataStage = data.data;   //这里是我们后台返给我的数据
                layui.each(data.data, function (index, item) {
                    var statisticsObj = {name:'',value:''};   //因为ECharts里边需要的的数据格式是这样的

                    statisticsObj.name = item.name;
                    statisticsObj.value = item.numbers;
                    statisticsData.push(statisticsObj);   //把拿到的异步数据push进我自己建的数组里
                });



                myCharts5.setOption({
                    series: [{
                        data: statisticsData    //这里是异步加载系列列表
                    }]
                })
            },
            error: function(){
                console.log('失败')
            }
        })

        // 切换选项卡重新渲染
        element.on('tab(tabZZT)', function (data) {
            if (data.index == 0) {
                myCharts3.resize();
            } else {
                myCharts4.resize();
            }
        });

        // 窗口大小改变事件
        window.onresize = function () {

            myCharts1.resize();

            myCharts5.resize();
        };

    });


</script>

</body>
</html>